<template>
  <div ref="chart" class="chart-render-box"></div>
</template>
<script setup>
import * as echarts from 'echarts'
import { onMounted, ref } from 'vue'
const props = defineProps({
  xData: {
    type: Array,
    default: () => [],
  },
  sData: {
    type: Array,
    default: () => [],
  },
  data1: {
    type: Array,
    default: () => [],
  },
  data2: {
    type: Array,
    default: () => [],
  },
  data3: {
    type: Array,
    default: () => [],
  },
})
const option = {
  title: {
    text: '80%',
    x: 'center',
    y: 'center',
    textStyle: {
      fontWeight: 'normal',
      color: '#fff',
      fontSize: '20',
    },
    subtext: '中奖率',
    subtextStyle: {
      fontSize: 18,
      color: '#fff',
    },
  },
  color: ['#e9edfc'],
  series: [
    {
      name: 'Line 1',
      type: 'pie',
      clockWise: true,
      radius: ['70%', '90%'],
      itemStyle: {
        normal: {
          label: {
            show: false,
          },
          labelLine: {
            show: false,
          },
        },
      },
      hoverAnimation: false,
      data: [
        {
          value: 80,
          name: '01',
          itemStyle: {
            normal: {
              color: '#f7c32b',
              label: {
                show: false,
              },
              labelLine: {
                show: false,
              },
            },
          },
        },
        {
          name: '02',
          value: 20,
        },
      ],
    },
  ],
}
const chart = ref()
onMounted(() => {
  chart.value.removeAttribute('_echarts_instance_')
  const myChart = echarts.init(chart.value)
  myChart.setOption(option)
  window.addEventListener('resize', function () {
    // 在窗口尺寸变化时重新刷新图表
    myChart.resize()
  })
})
</script>
<style scoped lang="scss">
.chart-render-box {
  width: 100%;
  height: 100%;
  flex: 1;
}
</style>
